<template>
    <popup
        :show="visible"
        :show-close="false"
        width="420px"
        title="访问密码"
        cancelButtonText=""
        :async-close="true"
        @close="visible = false"
        @confirm="handleSubmit"
    >
        <div class="px-6 py-8 pb-3">
            <el-form ref="formRef" :model="formData" :rules="formRules" >
                <el-form-item prop="password">
                    <el-input
                        v-model="formData.password"
                        placeholder="请输入密码"
                        type="password"
                        clearable
                        @keydown.enter="(e) => e.preventDefault()"
                    />
                </el-form-item>
            </el-form>
        </div>
    </popup>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'

const emits = defineEmits<{
  (event: 'confirm', value: any): void
}>()

// 弹窗状态
const visible = ref<boolean>(false)

// 表单参数
const formData = reactive({
    password: ''
})

// 表单校验
const formRef = shallowRef<FormInstance>()
const formRules = shallowReactive<FormRules>({
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ]
})

/**
 * 提交
 */
const handleSubmit = async () => {
    await formRef.value?.validate()
        .then(() => {
            emits('confirm', formData)
        }).catch(() => {})
}

/**
 * 打开
 */
const open = () => {
    visible.value = true
}

/**
 * 关闭
 */
const close = () => {
    visible.value = false
}

defineExpose({
    open,
    close
})
</script>
